<!DOCTYPE html>
<html class="html">
	<head>
		<title>New Line</title>	
		<script>
			function addRow()
			{
				var table = document.getElementById("stations");
 
	            var rowCount = table.rows.length;
	            var row = table.insertRow(rowCount);
	 
				var cell1 = row.insertCell(0);
	            cell1.innerHTML = "<label class='desc'>Station<span class='req'>*</span>:</label>";
				cell1.align = "right";
				
	            var cell2 = row.insertCell(1);
	            var element1 = document.createElement("input");
	            element1.type = "text";
				element1.id = "through"+rowCount;
				element1.size = "40";
	            cell2.appendChild(element1);
			}
			function checkform()
			{
				var f = document.forms["lineForm"].elements;
				var cansubmit=true;
				for (var i = 0; i < f.length; i++) {
					if (f[i].value.length==0) cansubmit=false;
				}
				if (cansubmit)
					document.getElementById('submit').disabled=false;
				else
					document.getElementById('submit').disabled=true;
			}
		</script>
		<link rel="stylesheet" href="css/structure.css" type="text/css" />
		<link rel="stylesheet" href="css/form.css" type="text/css" />
		<link rel="stylesheet" href="css/theme.css" type="text/css" />
	</head>
	<body>
		<div id="container">
		<form action="" id="lineForm" name="lineForm" class="wufoo">
			<br />
			<div class="section first">New Line</div>
			<br />
			<div align="center">
				<table border="0" id="stations" cellpadding="10" width="80%" summary="">
					<tr>
						<td width="60%" align="right"><label class="desc">Transportation Type<span class="req">*</span></label></td>
						<td>
							<select>
								<option>Metro</option>
								<option>Bus</option>
							</select>
						</td>
					</tr>
					<tr>
						<td align="right"><label class="desc">Line No.<span class="req">*</span></label></td>
						<td>
							<input type="text" id="start" size="40" onKeyup="checkform()"/>
						</td>
					</tr>
					<tr>
						<td align="right"><label class="desc">Start Station<span class="req">*</span>:</label></td>
						<td><input type="text" id="start" size="40" onKeyup="checkform()"/></td>
					</tr>
					<tr>
						<td align="right"><label class="desc">End Station<span class="req">*</span>:</label></td>
						<td><input type="text" id="end" size="40" onKeyup="checkform()"/></td>
					</tr>
					<tr>
						<td align="right"><label class="desc">Through</label></td>
						<td><input type="button" id="add" onClick="addRow()" value="Add Station"/></td>
					</tr>
				</table>
			</div>
			<br />
			<div align="center" width="100%">
				<input type="submit" id="submit" value="Post" disabled="true"/>
			</div>
		</form>	
		</div>
	</body>
</html>